<template>
    <div class="editor-box">
        <div  :class="{'editor-header':nav.navBarFixed}">
            <div class="top-container">
                <div>
                    <el-button type="text" @click="$router.push('/center/blog-manage')">&lt;&lt; 返回</el-button>
                </div>
                <div>
                   
                    <el-button type="text" @click="saveOrUpdate">发布</el-button>

                </div>
            </div>
            <div style="border-bottom: 1px solid #e8e8e8;">
                
                <Toolbar
                    class="editor-toolbar"
                    :editor="editor"
                    :defaultConfig="toolbarConfig"
                />
            </div>

        </div>
        
        <div class="content">
            <div class="editor-container">
                <div class="title-container">
                    <input placeholder="请输入文章标题..." v-model="article.title">
                </div>
            
                <!-- 编辑器 -->
                <Editor
                id="editor-text-area"
                :defaultConfig="editorConfig"
                v-model="article.content"
                @onChange="onChange"
                @onCreated="onCreated"
                />
                
            </div>
        </div>

    </div>
  
</template>

<script>

import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css';
import {get,post,upload} from '@/utils/api.js'
export default {

    data(){
        return{
            editor: null,
            article:{},
            toolbarConfig: {
                // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
                excludeKeys: ['fullScreen' ], //隐藏全屏按钮
            },
            editorConfig: {
                placeholder: '请输入内容...',
                scroll:false,
                // autoFocus: false,
                // 所有的菜单配置，都要在 MENU_CONF 属性下
                MENU_CONF: {
                    uploadImage:{
                        async customUpload(file, insertFn) {
                            const promise = upload({
                                url:'/base-file/file/upload',
                                data:{file}
                            })
                            promise.then(res=>{
                                if(res&&res.code === 200){
                                    insertFn(res.data.link, res.data.filename, res.data.link);
                                }
                            });
                        }

                    },
                    uploadVideo:{
                        async customUpload(file, insertFn) { 
                            let poster = '';                 
                            const promise = upload({
                                url:'/base-file/file/upload',
                                data:{file}
                            })
                            promise.then(res=>{
                                if(res&&res.code === 200){
                                    insertFn(res.data.link, poster)
                                }
                            });
                            
                        }
                    }
                }
            },
            nav:{
                navBarTop:100,
                navBarFixed:false,
            }
            

        }
    },
    components:{Editor,Toolbar},
    methods:{
        onCreated(editor) {//初始化富文本编辑器
            this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错
            
        },
        onChange(editor) {//监听变更
            // console.log('onChange', editor.getHtml()) // onChange 时获取编辑器最新内容
        },
        watchScroll(){
           
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            //console.log(scrollTop);
            this.nav.navBarFixed = scrollTop > this.nav.navBarTop?true:false;

        },
        watchClick(e){
            const editor = this.editor;
            if (editor == null) return;
            if(e.target.id=='editor-text-area'){
                editor.blur()
                 editor.focus(true) // focus 到末尾
            }
            


        },
        getBlogInfo(){
            let id = this.$route.params.id;
            if(id){
                const promise = get({
                    url:'/base-blog/front/blog/details/unconditional',
                    params:{id}
                });

                promise.then(res=>{
                    if(res&&res.code === 200){
                        this.article = res.data;
                    }
                })

                
            }
        },
        saveOrUpdate(){
            const promise = post({
                url:'/base-blog/front/blog/save-or-update',
                data:{...this.article}
            });

            promise.then(res=>{
                if(res){
                    if(res.code === 200){

                        this.$message.success(res.message);
                        this.$router.push('/center/blog-manage');
                        return;
                    }

                    this.$message.error(res.message);
                }
            })
        }

    },
    created(){
        this.getBlogInfo();
        

    },
    mounted() {
        window.addEventListener("scroll", this.watchScroll);//创建监听器
        window.addEventListener('click',this.watchClick);//监听单击事件
    },
    beforeDestroy() {
        window.removeEventListener("scroll", this.watchScroll);//移除监听器
        window.removeEventListener('click',this.watchClick);//移除单击事件监听器
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！
    }

}
</script>

<style scoped>
    .content {
      height: calc(100% - 40px);
      background-color: rgb(245, 245, 245);
      overflow-y: auto;
      position: relative;
    }
    .top-container {
      display: flex;
      width: 96%;
      height: 50px;
      justify-content: space-between;  
      line-height: 50px;
      border-bottom: 1px solid #e8e8e8;
      padding-left: 30px;
      background-color: #fff;

    }
    .editor-container {
      width: 850px;
      margin: 30px auto 150px auto;
      background-color: #fff;
      padding: 20px 50px 50px 50px;
      border: 1px solid #e8e8e8;
      box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
    }
    .title-container {
      padding: 20px 0;
      border-bottom: 1px solid #e8e8e8;
    }

    .title-container input {
      font-size: 30px;
      border: 0;
      outline: none;
      width: 100%;
      line-height: 1;
    }

    #editor-text-area {
      min-height: 900px;
      margin-top: 20px;
    }

    .editor-header{
        width: 100%;
        position: fixed;
        z-index: 1;
        background-color: #fff;

    }

    .editor-box{
        background-color: #fff;
        height: 100%;
        overflow: hidden;
        color: #333;
        animation: fadeIn 1s;
    }



</style>